<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="../src/simple-excel.js"></script>
        <style>
            * { font-family: Helvetica, Arial, sans-serif; font-size: 12px; margin : 10px }
            td { border : 1px solid #000; padding : 10px }
        </style>
    </head>
    <body>
        <label>Load CSV file: </label><input type="file" id="fileInputCSV" /><br/>
        <label>Load XML file: </label><input type="file" id="fileInputXML" /><br/>
        <table id="result"></table>
        <input type="button" id="fileExport" hidden="true" />
        <script type="text/javascript">
        
            // check browser support
            // console.log(SimpleExcel.isSupportedBrowser);
            
            var fileInputCSV = document.getElementById('fileInputCSV'); 
            var fileInputXML = document.getElementById('fileInputXML'); 
                  
            // when local file loaded
            fileInputCSV.addEventListener('change', function (e) {
                
                // parse as CSV
                var file = e.target.files[0];
                var csvParser = new SimpleExcel.Parser.CSV();
                csvParser.setDelimiter(',');
                csvParser.loadFile(file, function () {
                    
                    // draw HTML table based on sheet data
                    var sheet = csvParser.getSheet();
                    var table = document.getElementById('result');
                    table.innerHTML = "";
                    sheet.forEach(function (el, i) {                    
                        var row = document.createElement('tr');
                        el.forEach(function (el, i) {
                            var cell = document.createElement('td');
                            cell.innerHTML = el.value;
                            row.appendChild(cell);
                        });
                        table.appendChild(row);
                    });                    
                                    
                    // create button to export as TSV
                    var btnSave = document.getElementById('fileExport');
                    btnSave.hidden = false;
                    btnSave.value = 'Save as TSV file ->';
                    document.body.appendChild(btnSave);
                    
                    // export when button clicked
                    btnSave.addEventListener('click', function (e) {                
                        var tsvWriter = new SimpleExcel.Writer.TSV();
                        tsvWriter.insertSheet(csvParser.getSheet(1));
                        tsvWriter.saveFile();
                    });
                    
                    // print to console just for quick testing
                    console.log(csvParser.getSheet(1));
                    console.log(csvParser.getSheet(1).getRow(1));
                    console.log(csvParser.getSheet(1).getColumn(2));
                    console.log(csvParser.getSheet(1).getCell(3, 1));
                    console.log(csvParser.getSheet(1).getCell(2, 3).value); 
                });
            });
            
            // when local XML file loaded
            fileInputXML.addEventListener('change', function (e) {
                
                // parse as XML
                var file = e.target.files[0];
                var xmlParser = new SimpleExcel.Parser.XML();
                xmlParser.loadFile(file, function () {
                    
                    // draw HTML table based on sheet data
                    var sheet = xmlParser.getSheet();
                    var table = document.getElementById('result');
                    table.innerHTML = "";
                    sheet.forEach(function (el, i) {                    
                        var row = document.createElement('tr');
                        el.forEach(function (el, i) {
                            var cell = document.createElement('td');
                            cell.innerHTML = el.value;
                            row.appendChild(cell);
                        });
                        table.appendChild(row);
                    });          
                                    
                    // create button to export as CSV
                    var btnSave = document.getElementById('fileExport');
                    btnSave.hidden = false;
                    btnSave.value = 'Save as CSV file ->';
                    document.body.appendChild(btnSave);
                    
                    // export when button clicked
                    btnSave.addEventListener('click', function (e) {                
                        var csvWriter = new SimpleExcel.Writer.CSV();
                        csvWriter.insertSheet(xmlParser.getSheet(1));
                        csvWriter.saveFile();
                    });          
                    
                    // print to console just for quick testing
                    console.log(xmlParser.getSheet(1));
                    console.log(xmlParser.getSheet(1).getRow(1));
                    console.log(xmlParser.getSheet(1).getColumn(2));
                    console.log(xmlParser.getSheet(1).getCell(3, 1));
                    console.log(xmlParser.getSheet(1).getCell(2, 3).value); 
                });
            });
            
        </script>
    </body>
</html>
